<template>
	<view class="lyric-wrap">
		<p class="notCurrent before">{{currentIndex&&this.lyric[currentIndex-1]?this.lyric[currentIndex-1].text:""}}</p>
		<p class="current">{{currentLyric}}</p>
		<p class="notCurrent after">{{currentIndex&&this.lyric[currentIndex+1]?this.lyric[currentIndex+1].text:""}}</p>
	</view>
</template>

<script>
	import {
		transformTimeToNumber
	} from "../utils/helper.js"
	export default {
		props: {
			songLrc: {
				type: String,
			},
			current_time: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				currentLyric: "",
				currentIndex: "",
			};
		},
		watch: {
			current_time() {
				if(this.songLrc&&this.lyric){
					this.lyric.forEach((item, index) => {
						if (item.timing && this.current_time > item.timing) {
							this.currentLyric = item.text
							this.currentIndex = index;
						}
					})
				}else{
					return "";
				}
				
			}
		},
		computed: {
			lyric() {
				
				if (this.songLrc&&this.songLrc.indexOf("[") > -1) {
					return this.songLrc.split("[").map(item => {
						let t = {};
						if (item.indexOf("]")) {
							const wordBreak = item.split("]")
							t.timing = transformTimeToNumber(wordBreak[0]);
							t.text = wordBreak[1]
						}
						return t;
					})

				} else {
					return ""
				}

			},
		},
		onLoad() {

		}
	}
</script>

<style lang="scss" scoped>
	.lyric-wrap {
		color: white;
		text-align: center;
		font-size: .6rem;
		height:3rem;
		overflow: hidden;
		.notCurrent{
			opacity: 0.6;
		}
		.current{
			font-size: .9rem;
			transition: all .3s ease;
			opacity: .9;
		}
	}
</style>
